<template>
	<view>
		<image class="loginbg" src="https://youlinapi.zhihui361.com/image/wx/loginbg-rider.png" mode=""></image>
		<navbar :isBack="false" background="transparent"></navbar>
		<view class="main pr fa fdc">
			<image class="logo" :src="logo" mode=""></image>
			<view class="welcome">欢迎登录{{appName}} 配送员端</view>
			<view class="form">
				<view class="title fa">
					<image class="title-icon" src="../../static/account.png" mode=""></image>
					<view>账号</view>
				</view>
				<view class="fill-box fa">
					<input type="text" placeholder="请输入账号" v-model="name">
				</view>
				<view class="title fa">
					<image class="title-icon" src="../../static/password.png" mode=""></image>
					<view>密码</view>
				</view>
				<view class="fill-box fa">
					<input type="password" placeholder="请输入密码" v-model="password">
				</view>
				<view class="login-btn fa jcc" @click="goLogin">登录</view>
				<view class="forget fa jcc" @click="utils.navTo('/pages/mine/service')">忘记密码？联系客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logo: '',
				appName: '',
				name: '',
				password: '',
				openId: ''
			};
		},
		onLoad() {
			this.getAppInfo()
			this.getCode()
		},
		methods: {
			getAppInfo() {
				this.logo = '../../static/logo.png'
				this.appName = '社区帮'
			},
			getCode() {
				wx.login({
					success: result => {
						if(result.code) {
							this.api.getOpenIdFunc({
								code: result.code
							}).then(res => {
								if(res.code == 200) {
									this.openId = res.data.openId
								}
							})
						}
					}
				})
			},
			goLogin() {
				if(!this.name) return uni.showToast({
					title: '请输入账号',
					icon: 'none'
				})
				if(!this.password) return uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				uni.showLoading({
					title: '登录中'
				})
				this.api.accountLoginFunc({
					name: this.name,
					password: this.password,
					openId: this.openId
				}).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						uni.showToast({
							title: '登录成功'
						})
						uni.setStorageSync('token', res.data)
						wx.requestSubscribeMessage({
							tmplIds: ['HQ4lLIvbYkpRL7hu8Po9gG-1UfmIZ4w502w_QxSBN4w'],
							success: res2 => {
								console.log(res2)
								uni.navigateBack()
							},
							fail: err => {
								console.log(err)
								uni.navigateBack()
							}
						})
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '登录失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginbg{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
	.main{
		padding: 28rpx 50rpx;
	}
	.logo{
		width: 156rpx;
		height: 156rpx;
	}
	.welcome{
		margin-top: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 42rpx;
	}
	.form{
		margin-top: 48rpx;
		padding: 6rpx 36rpx 48rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 48rpx;
		background-color: #fff;
		.title{
			margin-top: 40rpx;
			font-size: 30rpx;
			font-weight: bold;
			.title-icon{
				margin-right: 6rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}
		.fill-box{
			margin-top: 30rpx;
			padding: 0 36rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: var(--bodybg);
			input{
				flex: 1;
			}
		}
		.login-btn{
			margin-top: 84rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			font-size: 30rpx;
			color: #fff;
			background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
		}
		.forget{
			margin-top: 38rpx;
			color: #315F94;
		}
	}
</style>
